<template>
    <el-main class="oplog">
        <el-main class="ep-body">
            <el-card class="ep-card">
                <el-form :model="form" name="form" >
                    <el-row :gutter="10">
                        <el-col :span="8">
                            <el-form-item label="经办日期" label-width="120px">
                                <el-date-picker
                                    v-model="form.aae036"
                                    type="date"
                                    placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="16" align="right">
                            <el-button id="moreQuery" @click="dialogFormVisible = true"
                                       type="primary" size="small">高级搜索</el-button>
                            <el-button id="query" type="primary" size="small" @click="handleQuery()">查询</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <el-card class="ep-card">
                <el-row>
                    <el-table :data="tableData.data" border style="width: 100%;" height="calc(100vh - 310px)" isUpdate>
                        <el-table-column type="index" align="center" width="30px" label="序号"></el-table-column>
                        <el-table-column sortable align="center" prop="opseno" label="日志流水号"></el-table-column>
                        <el-table-column sortable align="center" prop="functionid" label="业务名称"></el-table-column>
                        <el-table-column sortable align="center" prop="aaa027" label="统筹区编码"></el-table-column>
                        <el-table-column sortable align="center" prop="digest" label="摘要信息"></el-table-column>
                        <el-table-column sortable align="center" prop="aae011" label="经办人"></el-table-column>
                        <el-table-column sortable align="center" prop="aae036" label="经办日期" :formatter="dateFormat"></el-table-column>
                        <el-table-column prop="op" align="center" label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" @click="handleRollBack(scope.$index, scope.row)" v-if="functionid !== undefined && scope.row.eae024 === '0'">回退</el-button>
                                <span style="padding-right: 10px" v-else-if="functionid !== undefined && scope.row.eae024 === '1'">
                                    已回退
                                </span>
                                <el-button type="text" size="mini" @click="handleOriSource(scope.$index, scope.row)">界面还原</el-button>
                                <el-button type="text" size="mini">打印</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        style="text-align: right;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="tableData.page"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="10"
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData.total">
                    </el-pagination>
                </el-row>
            </el-card>
        </el-main>
        <el-dialog title="高级搜索" :visible.sync="dialogFormVisible" width="600px" top="15vh" close-on-press-escape>
            <el-form :model="oplogForm" name="oplogForm">
                <el-row>
                    <el-col>
                        <el-form-item label="经办日期" label-width="120px">
                            <el-date-picker
                                v-model="oplogForm.aae036"
                                type="datetimerange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="业务名称" label-width="120px">
                            <el-input style="width:400px;" v-model="oplogForm.functiontitle" type="text" name="functiontitle" placeholder="请输入业务名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="摘要" label-width="120px">
                            <el-input style="width:400px;" v-model="oplogForm.digest" type="text" name="digest" placeholder="请输入摘要"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="经办人" label-width="120px">
                            <el-select></el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="回退标志" label-width="120px">
                            <el-select v-model="oplogForm.eae024">
                                <el-option v-for="item in codeTypes.EAE024" :key="item.key" :label="item.value" :value="item.key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleMoreQuery()">确 定</el-button>
            </div>
        </el-dialog>
    </el-main>
</template>

<script type="es6">
    import qs from 'qs';
    let queryForm;
    export default {
        data() {
            return {
                form: {
                    aae036: ''
                },
                tableData: {
                    data: [],
                    total: 0,
                    page: 1,
                    size: 10
                },
                oplogForm: {
                    opseno: '',
                    functionid: '',
                    aaa027: '',
                    digest: '',
                    aae011: '',
                    aae036: ''
                },
                codeTypes: {
                    EAE024: [{
                        key: '1',
                        value: '已回退'
                    }, {
                        key: '0',
                        value: '未回退'
                    }]
                },
                dialogFormVisible: false,
                path: this.$route.path,
                functionid: this.$route.query.functionId
            }
        },
        mounted() {
            this.query();
            console.info(this.functionid);
        },
        computed: {
            menu() {
                return this.$store.getters.menu;
            }
        },
        watch: {
            menu: {
                handler(value) {
                    return value;
                },
                deep: true
            }
        },
        methods: {
            query(queryForm) {
                let params = {...queryForm, functionid: this.functionid, page:this.tableData.page - 1, size:this.tableData.size};
                this.$api.commonPost(this.path + "/query", params).then(res => {
                    console.log(res);
                    if(res.status === "0") {
                        this.tableData.total = res.data.totalElements;
                        this.tableData.data = res.data.content;
                        this.dialogFormVisible = false;
                    }
                });
            },
            rollback(opseno) {
                let params = {opseno: opseno};
                this.$api.commonGet(this.path + "/rollback", params).then(res => {
                    this.handleMessage(res);
                    if(res.status === "0") {
                        this.query(queryForm);
                    }
                });
            },
            handleQuery() {
                this.tableData.page = 1;
                queryForm = {aae036: this.form.aae036};
                this.query(queryForm);
            },
            handleMoreQuery() {
                this.tableData.page = 1;
                queryForm = {...this.oplogForm};
                this.query(queryForm);
            },
            handleRollBack(index, row) {
                this.$confirm('是否回退该条日志?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.rollback(row.opseno);
                }).catch(() => {
                    this.$message.success("已取消回退");
                });
            },
            handleOriSource(index, row) {
                let list = [];
                this.$router.push({
                    path: '/log',
                    query: {
                        opseno: row.opseno
                    }
                });
                list.push({
                    title: '界面还原',
                    path: '/log'
                });
                sessionStorage.setItem('menuList', qs.stringify(list));
                this.$store.dispatch('SET_MENU', this.unique(list));
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.tableData.size = val;
                if(this.tableData.total !== 0) {
                    this.query(queryForm);
                }
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.tableData.page = val;
                this.query(queryForm);
            },
            dateFormat(row, column) {
                let dateValue = row[column.property];
                if (dateValue == undefined) {
                    return "";
                }
                let date = new Date(dateValue);
                return date.getFullYear() + '-' + this.preZero(date.getMonth() + 1) + '-' + this.preZero(date.getDate()) + ' ' + this.preZero(date.getHours()) + ":" + this.preZero(date.getMinutes()) + ":" + this.preZero(date.getSeconds());
            },
            // 增加前置0
            preZero(val) {
                if(val < 10) {
                    return '0' + val;
                } else {
                    return val;
                }
            },
            handleMessage(res) {
                if (res.status === '0') {
                    if (res.message !== null) {
                        this.$message.success(res.message);
                    }
                } else if (res.status === '1' && res.message !== null) {
                    this.$message.warning(res.message);
                } else if (res.status === '9' && res.message !== null) {
                    this.$message.error(res.message);
                }
            },
            // 去重
            unique(newList) {
                let list = [];
                for (let i in this.menu) {
                    list.push(this.menu[i]);
                }
                if (newList) {
                    if (!list) {
                        return newList;
                    } else {
                        let temp = [];
                        newList.forEach(item => {
                            let flag = false;
                            list.forEach(menu => {
                                if (menu.path && item.path && menu.path === item.path) {
                                    flag = true;
                                }
                            });
                            if (!flag) {
                                temp.push(item)
                            }
                        });
                        return list.concat(temp);
                    }
                } else {
                    return []
                }
            }
        }
    }
</script>

<!--
<style>
    .el-input__icon {
        height: auto !important;
    }
    .el-range-separator {
        height: auto !important;
    }
</style>
-->
<style lang="less" scoped>
    /deep/ .cell {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    /deep/ .el-date-editor .el-range__icon {
        line-height: 1;
    }
    /deep/ .el-date-editor .el-range-separator {
        line-height: 23px;
        font-size: 12px;
    }
    /deep/ .el-range-editor .el-range-input {
        font-size: 12px;
    }
    /deep/ .el-date-editor .el-range__close-icon {
        line-height: 23px;
    }
</style>
